<script setup>
import FormConfig from '@/schema/components/form-config.vue'
import ComponentConfig from '@/schema/components/component-config.vue'

const schema = defineModel('schema')
const currentItem = defineModel('currentItem')

const activeTab = ref('form')

defineOptions({ name: 'ConfigPanel' })
</script>

<template>
  <div class="w-100p h-full">
    <el-tabs
      v-model="activeTab"
      class="h-full"
    >
      <el-tab-pane
        label="表单属性"
        name="form"
        class="h-full overflow-auto"
      >
        <el-scrollbar>
          <FormConfig
            v-model:schema="schema"
            v-model:currentItem="currentItem"
          />
        </el-scrollbar>
      </el-tab-pane>
      <el-tab-pane
        label="组件属性"
        name="component"
        class="h-full overflow-auto"
      >
        <el-scrollbar>
          <ComponentConfig
            v-model:schema="schema"
            v-model:currentItem="currentItem"
          />
        </el-scrollbar>
      </el-tab-pane>
    </el-tabs>
  </div>
</template>

<style lang="css" scoped>
:deep(.el-collapse-item__header) {
  color: var(--el-color-primary);
}
</style>
